import React, { useEffect, useState, useRef } from 'react';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import { connect } from 'umi';
import { Space, Modal } from 'antd'

const ThirdTrace = (props) => {
  const { visible = false, onClose, dispatch, loading, list, userList } = props;
  const { show = false, detail = {} } = visible;
  const { id } = detail
  const [active, setActive] = useState('system')
  useEffect(() => {
    if (show) {
      childRef.current.fetchGetData()
    }
  }, [active])
  const getColumns = [
    {
      title: '操作 ',
      dataIndex: 'traceType',
    },

    {
      title: '操作类别',
      dataIndex: 'subTraceType',
    },
    {
      title: '操作时间',
      dataIndex: 'createTime',
    },
    {
      title: '轨迹明细',
      dataIndex: 'trace',
    },
  ];
  const getSystemColumns = [
    {
      title: '操作 ',
      dataIndex: 'actionName',
    },
    {
      title: '操作时间',
      dataIndex: 'createTime',
    },
    {
      title: '轨迹明细',
      dataIndex: 'trace',
    },
  ];
  const requestUrl = {
    'system': 'subscriber/fetchListUserTrace',
    thild: 'subscriber/fetchUserThirdTrace',

  }[active]
  const modalProps = {
    title: `用户轨迹`,
    width: 1200,
    visible: show,
    maskClosable: true,
    destroyOnClose: true,
    loading: loading,
    zIndex: 1001,
    onOk: () => {
      onSetList(selectList);
      onClose();
    },
  };
  const childRef = useRef();
  const renderList = active === 'system' ? userList : list
  return (
    <Modal {...modalProps} onCancel={onClose}>
      <TableDataBlock
        cardProps={{
          tabList: [{
            key: 'system',
            tab: '系统轨迹',
          }, {
            key: 'thild',
            tab: '三方轨迹',
          }],
          onTabChange: (key) => {
            setActive(key);
          }
        }}
        params={{ organizationUserId: id, dateType: 'month' }}
        cRef={childRef}
        loading={loading}
        columns={active === 'system' ? getSystemColumns : getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType={requestUrl}
        {...renderList}
      ></TableDataBlock>
    </Modal>

  );
};
export default connect(({ subscriber, loading }) => ({
  list: subscriber.traceInfoList,
  userList: subscriber.userTraceList,
  loading: loading.effects['subscriber/fetchUserThirdTrace'],
}))(ThirdTrace);;
